import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './ChinaBox.module.css';
import * as echarts from 'echarts';
import { CHINA_JSON } from './china.js';
export default function ChartBox({ className, chang, region, account }) {
	const regionLOLA = [];
	Object.keys(region).forEach(e => {
		const arr = e.split('_');
		if (arr[0] > 73.33 && arr[0] < 135.05 && arr[1] > 3.51 && arr[1] < 53.33) {
			regionLOLA.push(arr);
		}
	});
	const regionLine = regionLOLA.map(e => {
		if (e[0] > 104) {
			return {
				coords: [[105.5, 46.5], e],
				lineStyle: { curveness: 0.2 },
			};
		} else {
			return {
				coords: [[103.5, 46.5], e],
				lineStyle: { curveness: -0.2 },
			};
		}
	});
	const effect = {
		show: true,
		scaleSize: 5,
		period: 1.5, // 运动周期，无单位，值越大越慢
		color: '#fff',
		shadowColor: 'rgba(220,220,220,0.4)',
		shadowBlur: 5,
		trailLength: 0.1, // 光斑拖尾0-1
		symbolSize: [5, 10], // 光斑[w,h]
	};
	const formatterFun = params => {
		const data = params.data;
		const objKey =
			typeof data[0] !== 'string' ? data[0].join('_') : data.join('_');
		let str = '';
		str += `<div style="padding:0.2rem 1rem;color:#2A2B31;">`;
		str += `<span style="color:#2A2B31;">监测Web资产<span style="color: #0b6fd6;">${region[objKey].total_jobs}</span>个，发现风险资产${region[objKey].risk_jobs}个</span></br>`;
		str += `<span style="color:#2A2B31;">监测主机资产<span style="color:#f04038;">${region[objKey].total_jobs}</span>个，发现风险资产${region[objKey].risk_jobs}个</span></br>`;
		str += `</div>`;
		return str;
	};
	const option = {
		tooltip: {
			backgroundColor: '#fff',
			position: 'top',
			formatter: function (params) {
				return formatterFun(params);
			},
		},
		geo: {
			map: 'china',
			label: {
				emphasis: {
					show: true,
					color: '#2A2B31',
				},
			},
			zoom: 1.2,
			itemStyle: {
				normal: {
					borderColor: '#CBD1DA',
					areaColor: '#DAE9F9',
				},
				emphasis: {
					borderColor: '#999EA8',
					areaColor: '#DAE9F9',
				},
			},
		},
		series: [
			{
				// 地图点
				type: 'scatter',
				coordinateSystem: 'geo',
				data: regionLOLA,
				symbolSize: 10,
				itemStyle: {
					color: '#0072FF',
				},
			},
			{
				// 线条参数和样式
				type: 'lines',
				coordinateSystem: 'geo',
				// zlevel: 10,
				// effect,
				label: {
					emphasis: {
						show: false,
					},
				},
				lineStyle: {
					normal: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: 'rgba(0, 144, 255, 0)', // 100% 处的颜色
								},
								{
									offset: 1,
									color: '#0072FF', // 0% 处的颜色
								},
							],
						},
						// 尾迹线条宽度
						width: 3,
						// 尾迹线条透明度
						opacity: 1,
						// 尾迹线条曲直度 0为直线
						curveness: 0.1,
					},
				},
				data: regionLine,
			},
			{
				// 线条参数和样式
				type: 'lines',
				coordinateSystem: 'geo',
				// 变化频率
				zlevel: 10,
				effect,
				label: {
					show: false,
				},
				lineStyle: {
					width: 0,
				},
				data: regionLine,
			},
		],
	};
	React.useEffect(() => {
		const myChart2 = echarts.init(document.getElementById('mapChina'));
		echarts.registerMap('china', CHINA_JSON);
		myChart2.setOption(option, true);
		myChart2.resize();
	}, [chang, region]);
	return (
		<div className={cn(className, s.chartBox)}>
			<div id="mapChina" style={{ width: '65vw', height: '35rem' }}></div>
			<div className={s.shadeBox}>
				<p className={s.accountName}>{account.name}</p>
				<p>
					已为您持续服务<span className={s.blue}>{account.days}</span>天
				</p>
				<p>
					监测Web资产<span className={s.blue}>{account.total_jobs}</span>
					{'个，发现风险资产'}
					<span>{account.risk_jobs}</span>个
				</p>
				<p>
					监测主机资产<span className={s.blue}>{account.total_jobs}</span>
					{'个，发现风险资产'}
					<span>{account.risk_jobs}</span>个
				</p>
			</div>
			<div
				className={s.empty}
				style={{ display: JSON.stringify(region) === '{}' ? 'block' : 'none' }}
			>
				请配置源站IP查看被监测资产地理位置
			</div>
		</div>
	);
}

ChartBox.propTypes = {
	className: PropTypes.string,
	chang: PropTypes.string,
	region: PropTypes.any,
	account: PropTypes.any,
};

ChartBox.defaultProps = {
	className: s.chartBox,
};
